<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>财政支付查询系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="<%=path%>/static/layui/css/layui.css"/>
    <script src="<%=path%>/static/iconfont/iconfont.js"></script>
    <script type="text/javascript" src="<%=path%>/static/jquery/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="<%=path%>/static/layui/layui.js"></script>
    <script src="<%=path%>/static/echarts/echarts.js"></script>
    <style>
        .layui-form-label {
            width: 120px;
        }
        .layui-input-block {
            margin-left: 150px;
        }
        th div {
            text-align: center;
        }
        .layui-btn {
            background-color: #16b777;
        }
        .layui-btn-danger {
            background-color: #ff5722;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #16b777;
        }
    </style>
</head>
<body>
<div class="layui-container" style="width: 100%;padding: 20px;">
        <div class="layui-row">
            <div class="layui-form">
                <form id="searchForm" class="layui-form" action="" lay-filter="searchForm">
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">指标摘要</label>
                            <div class="layui-input-block">
                                <input id="zy" type="text" name="zy" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">项目类别</label>
                            <div class="layui-input-block">
                                <input id="xmkxmlb" type="text" name="xmkxmlb" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">项目编码</label>
                            <div class="layui-input-block">
                                <input id="czxmbm" type="text" name="czxmbm" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">项目名称</label>
                            <div class="layui-input-block">
                                <input id="czxmmc" type="text" name="czxmmc" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文号</label>
                            <div class="layui-input-block">
                                <input id="wh" type="text" name="wh" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">资金性质</label>
                            <div class="layui-input-block">
                                <input id="czzjxz" type="text" name="czzjxz" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">功能科目</label>
                            <div class="layui-input-block">
                                <input id="czgnkm" type="text" name="czgnkm" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">政府经济科目</label>
                            <div class="layui-input-block">
                                <input id="czzfjjkm" type="text" name="czzfjjkm" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门经济科目</label>
                            <div class="layui-input-block">
                                <input id="czbmjjkm" type="text" name="czbmjjkm" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <div class="button-container">
                                    <button type="button" class="layui-btn layui-bg-blue" onclick="search()" style="background-color: #004788 !important;">
                                        <i class="layui-icon layui-icon-search"></i>检索
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-blue" onclick="resetForm()" style="background-color: #ec6337 !important;">
                                        <i class="layui-icon layui-icon-refresh"></i>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="zbmk" value="${key}"/>
                </form>
            </div>
        </div>
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
        </div>
</div>
<script>
    let form = layui.form;
    let table = layui.table;
    let layer = layui.layer;
    var laydate = layui.laydate;

    form.render();

    $(function() {
        search();
        form.render();
    })

    function search() {
        let data = form.val("searchForm");
        table.render({
            method: 'post',
            elem: '#dataTable',
            url: '<%=path%>/api/gkjzzfpageList',
            where: data,
            cellMinWidth: 80,
            loading: true,
            page: true,
            totalRow: true,
            limit: 20,
            limits: [10, 20, 30, 50, 100],
            cols: [[
                {type: 'numbers', width: '4%', minWidth: 30, title: '序号', fixed: 'left'},
                {field: 'id', hide: true, fixed: 'left'},
                {field: 'zblxmc', width: '10%', minWidth: 100, title: '指标类型', align: 'center'},
                {field: 'xmkxmlb', width: '8%', minWidth: 100, title: '项目类别', align: 'center'},
                {field: 'zy', width: '10%', minWidth: 100, title: '摘要', align: 'right'},
                {field: 'czxmbm', width: '12%', minWidth: 100, title: '项目编码', align: 'right'},
                {field: 'czxmmc', width: '10%', minWidth: 100, title: '项目名称', align: 'right'},
                {field: 'sjzbwh', width: '10%', minWidth: 100, title: '上级指标文号', align: 'center'},
                {field: 'wh', width: '10%', minWidth: 100, title: '文号', align: 'center'},
                {field: 'xmmx', width: '10%', minWidth: 100, title: '项目明细', align: 'center'},
                {field: 'czzjxz', width: '10%', minWidth: 100, title: '资金性质', align: 'center'},
                {field: 'czgnkm', width: '10%', minWidth: 100, title: '功能科目', align: 'center'},
                {field: 'czzfjjkm', width: '10%', minWidth: 100, title: '政府经济科目', align: 'center'},
                {field: 'czbmjjkm', width: '10%', minWidth: 100, title: '部门经济科目', align: 'center'},
                {field: 'sftfgz', width: '10%', minWidth: 100, title: '是否统发工资', align: 'center'},
                {field: 'sfzfcg', width: '10%', minWidth: 100, title: '是否政府采购', align: 'center'},
                {field: 'zje', width: '10%', minWidth: 100, title: '总金额', align: 'center', templet: '<div>{{formatNumber(d.zje, 2)}}</div>'},
                {field: 'zxje', width: '10%', minWidth: 100, title: '执行金额', align: 'center', templet: '<div>{{formatNumber(d.zxje, 2)}}</div>'},
                {field: 'ye', width: '10%', minWidth: 100, title: '余额', align: 'center', templet: '<div>{{formatNumber(d.ye, 2)}}</div>'},
                {field: 'zxbl', width: '6%', minWidth: 100, title: '执行比例', align: 'center', templet: '<div>{{formatPercentage(d.zxbl)}}</div>'}
            ]]
        });
    }
    function resetForm() {
        // 清空所有输入框
        $('#searchForm input[type="text"]').val('');

        // 重置所有下拉选择框
        $('#searchForm select').val('');

        // 重新渲染表单
        form.render();

        // 重新执行查询
        search();
    }


    // 添加数字格式化函数
    function formatNumber(value, decimals) {
        if (value == null || value === '') return '';
        // 保留指定小数位数
        let num = parseFloat(value).toFixed(decimals);
        // 添加千分位分隔符
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    // 添加百分比格式化函数
    function formatPercentage(value) {
        if (value == null || value === '') return '';
        // 将小数转换为百分比（乘以100）
        let percentage = parseFloat(value) * 100;
        return percentage.toFixed(2) + '%';
    }

</script>
</body>
</html>
